<template>
  <div class="box">
    <a-row class="top" :gutter="[12, 12]">
      <a-col :span="24">
        <div class="topBox topRightBox">
          <div class="titleBox">
            <div class="title">消息中心</div>
          </div>
          <DynamicTable
            size="small"
            :bordered="false"
            :data-request="loadDataCaseXx"
            :columns="columnsCaseXx"
            row-key="id"
            :search="false"
            :showToolBar="false"
            :scroll="{ y: 200 }"
            :showIndex="true"
            :showHeader="false"
            :customRow="
              (record) => {
                return {
                  onClick: (event) => {
                    gotoPath(record);
                  }, // 点击行
                };
              }
            "
            :pagination="{
              pageSize: 5,
              showSizeChanger: false,
            }"
          >
          </DynamicTable>
        </div>
      </a-col>
      <a-col :span="14">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">事项统计</div>
            <div class="text">单位:个</div>
          </div>
          <a-row :gutter="[0, 12]">
            <a-col :span="8" v-for="item in dataSource" :key="item.key" @click="handleToUrl(item)">
              <div class="mainBox">
                <img :src="item.img" width="48" />
                <div class="mainText">
                  <div class="num" :style="{ color: item.color }">{{ item.num }}</div>
                  <div class="smallText">{{ item.title }}</div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
      <a-col :span="10">
        <div class="topBox topRightBox">
          <div class="titleBox">
            <div class="title">各单位罚款金额统计表</div>
          </div>
          <DynamicTable
            size="small"
            :bordered="false"
            :data-request="loadData"
            :columns="columns"
            row-key="id"
            :search="false"
            :pagination="false"
            :showToolBar="false"
            :scroll="{ y: 151 }"
            :showIndex="true"
          >
          </DynamicTable>
        </div>
      </a-col>
      <a-col :span="14">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">年度案件数量统计图</div>
            <div class="text">
              <img src="@/assets/images/bluespot.png" width="8" />
              案件数量
            </div>
          </div>
          <VChart :option="spaceChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="10">
        <div class="topBox">
          <div class="titleBox">
            <div class="title">案件类型占比图</div>
          </div>
          <VChart :option="caseChartOption" :style="newHeight()" autoresize />
        </div>
      </a-col>
      <a-col :span="14">
        <div class="topBox topRightBox">
          <div class="titleBox">
            <div class="title">案由分类案件数量统计表</div>
          </div>
          <DynamicTable
            size="small"
            :bordered="false"
            :data-request="loadDataCaseSp"
            :columns="columnsCaseSp"
            row-key="id"
            :search="false"
            :pagination="false"
            :showToolBar="false"
            :scroll="{ y: 151 }"
            :showIndex="true"
          >
          </DynamicTable>
        </div>
      </a-col>
      <a-col :span="10">
        <div class="topBox topRightBox">
          <div class="titleBox">
            <div class="title">各街道检查单位数量统计表</div>
          </div>
          <DynamicTable
            size="small"
            :bordered="false"
            :data-request="loadDataStUnitNum"
            :columns="columnsStUnitNum"
            row-key="id"
            :search="false"
            :pagination="false"
            :showToolBar="false"
            :scroll="{ y: 151 }"
            :showIndex="true"
          >
          </DynamicTable>
        </div>
      </a-col>
      <div style="width: 100%; height: 12px"></div>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';

  import img1 from '@/assets/images/main1.png';
  import img2 from '@/assets/images/main2.png';
  import img3 from '@/assets/images/main3.png';
  import img4 from '@/assets/images/main4.png';
  import img5 from '@/assets/images/main5.png';
  import img6 from '@/assets/images/main6.png';

  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { LineChart, PieChart } from 'echarts/charts';
  import type {
    LineSeriesOption,
    ComposeOption,
    XAXisOption,
    YAXisOption,
    PieSeriesOption,
  } from 'echarts/types/dist/shared';

  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';
  import {
    getTableListApi,
    getTableListCaseSpApi,
    getTableListStUnitNumApi,
    getDeptMoney,
    getCaseType,
    getMissionNum,
  } from '@/api/dashboard/welcome';
  import router from '@/router';
  import { getMessageList, getUnreadNum, readMsg } from '@/api/message';

  type ECOption = ComposeOption<LineSeriesOption | XAXisOption | YAXisOption | PieSeriesOption>;

  use([CanvasRenderer, TooltipComponent, GridComponent, LineChart, PieChart, LegendComponent]);

  const newHeight = () => {
    return `height: calc(100vh - 494px);min-height: 250px;width: 100%`;
  };
  const [DynamicTable, dynamicTableInstance] = useTable();

  // line
  const spaceChartOption = ref({
    color: ['#477BFF'],
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [],
        type: 'line',
      },
    ],
  });
  // pie
  const caseChartOption = ref({
    color: ['#477BFF', '#47D1CB', '#FF477B', '#59DBFF', '#CB47FF'],
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      top: 'bottom',
      left: 'right',
      icon: 'circle',
      align: 'left',
    },
    series: [
      {
        name: '案件类型',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 0, name: '已立案' },
          { value: 0, name: '调查取证' },
          { value: 0, name: '案件处理' },
          { value: 0, name: '结案归档' },
          { value: 0, name: '已结束' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  });
  // table
  const dataSource = reactive([
    {
      key: 1,
      num: 0,
      color: '#EB8A36',
      title: '消防监督检查',
      path: '/supervision/supervision/task-management',
      img: img1,
    },
    {
      key: 2,
      num: 0,
      color: '#1D77F5',
      title: '日常消防巡查任务',
      path: '/routine/routine/routineFirePatrol',
      img: img2,
    },
    {
      key: 3,
      num: 0,
      color: '#08BDA5',
      title: '行政许可任务',
      path: '/administrative/administrative/strative',
      img: img3,
    },
    {
      key: 4,
      num: 0,
      color: '#424CDB',
      title: '案件办理',
      path: '/administrative-penalty/administrative-penalty/case-management',
      img: img4,
    },
    {
      key: 5,
      num: 0,
      color: '#33BD24',
      title: '案件审批',
      path: '/administrative-penalty/administrative-penalty/case-approval',
      img: img5,
    },
    {
      key: 6,
      num: 0,
      color: '#FE8800',
      title: '行政许可审批',
      path: '/administrative/administrative/approve',
      img: img6,
    },
  ]);
  // 罚款金额
  const columns: TableColumn[] = [
    {
      title: '承办单位',
      align: 'center',
      dataIndex: 'deptName',
    },
    {
      title: '罚款金额',
      align: 'center',
      dataIndex: 'money',
    },
  ];
  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = await getTableListApi();
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  // 案件数量
  const columnsCaseSp: TableColumn[] = [
    {
      title: '案由名称',
      align: 'center',
      dataIndex: 'caseName',
    },
    {
      title: '案件数量',
      align: 'center',
      dataIndex: 'num',
    },
  ];
  const loadDataCaseSp = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = await getTableListCaseSpApi();
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  const columnsCaseXx: TableColumn[] = [
    {
      title: '内容',
      align: 'left',
      dataIndex: 'caseName',
      customRender: ({ record }) => record.content,
    },
    {
      title: '时间',
      align: 'center',
      dataIndex: 'updateTime',
      width: 300,
    },
  ];
  const loadDataCaseXx = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = await getMessageList(params);
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  // 单位数量
  const columnsStUnitNum: TableColumn[] = [
    {
      title: '街道名称',
      align: 'center',
      dataIndex: 'registerTown',
    },
    {
      title: '单位数量',
      align: 'center',
      dataIndex: 'num',
    },
  ];
  const loadDataStUnitNum = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = await getTableListStUnitNumApi();
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  const initData = () => {
    getDeptMoney().then((res) => {
      spaceChartOption.value.xAxis.data = res.month;
      spaceChartOption.value.series[0].data = res.num;
    });
    getCaseType().then((res) => {
      for (const key in res) {
        caseChartOption.value.series[0].data[Number(key) - 1].value = res[key];
      }
    });
    getMissionNum().then((res) => {
      numIncreasing(
        res.jdTaskNum,
        res.rcTaskNum,
        res.xzTaskNum,
        res.caseNum,
        res.approveNum,
        res.taskApproveNum,
      );
    });
  };
  // 数字递增  item:元素  target:目标数

  const numIncreasing = (
    workTarget,
    provinceTarget,
    personTarget,
    processTarget,
    approveTarget,
    taskTarget,
  ) => {
    let timer = 500;
    var numWork = 0;
    var numProvince = 0;
    var numPerson = 0;
    var numProcess = 0;
    var numTarget = 0;
    var numTask = 0;

    var twork =
      workTarget &&
      setInterval(() => {
        numWork++;
        dataSource[0].num = numWork;
        if (dataSource[0].num == workTarget) {
          clearInterval(twork);
        }
      }, timer / workTarget);

    var tprovince =
      provinceTarget &&
      setInterval(() => {
        numProvince++;
        dataSource[1].num = numProvince;
        if (dataSource[1].num == provinceTarget) {
          clearInterval(tprovince);
        }
      }, timer / provinceTarget);

    var tperson =
      personTarget &&
      setInterval(() => {
        numPerson++;
        dataSource[2].num = numPerson;
        if (dataSource[2].num == personTarget) {
          clearInterval(tperson);
        }
      }, timer / personTarget);

    var tprocess =
      processTarget &&
      setInterval(() => {
        numProcess++;
        dataSource[3].num = numProcess;
        if (dataSource[3].num == processTarget) {
          clearInterval(tprocess);
        }
      }, timer / processTarget);

    var tprove =
      approveTarget &&
      setInterval(() => {
        numTarget++;
        dataSource[4].num = numTarget;
        if (dataSource[4].num == approveTarget) {
          clearInterval(tprove);
        }
      }, timer / approveTarget);

    var task =
      taskTarget &&
      setInterval(() => {
        numTask++;
        dataSource[5].num = taskTarget;
        if (dataSource[5].num == taskTarget) {
          clearInterval(task);
        }
      }, timer / taskTarget);
  };

  const handleToUrl = (item) => {
    router.push({
      path: item.path,
    });
  };

  const gotoPath = async (item) => {
    const { code, data } = await readMsg(item.id);

    //消息类型 1、行政处罚审批 2、行政许可审批 3、复查任务 4、任务审批 5、延期/分期审批 6、案件终止审批 11、系统消息
    if (item.messageType == 1) {
      // 行政处罚 审批
      router.push({
        name: 'administrative-penalty-examine',
        query: { progressId: item.processId, id: item.bizId, chooseFlag: item.chooseFlag },
      });
    }
    if (item.messageType == 2) {
      // 行政许可审批
      router.push({
        name: 'administrative-approve-accraditation',
        query: { progressId: item.processId, id: item.bizId },
      });
    }
    if (item.messageType == 3) {
      // 复查任务
      router.push({
        name: 'routine-saveRoutine',
        query: { taskId: item.bizId },
      });
    }

    if (item.messageType == 4) {
      // 消防审批
      router.push({
        path: '/supervision/taskApproval',
        query: { id: item.bizId, progressId: item.processId, isCheck: '2' },
      });
    }

    if (item.messageType == 5) {
      // 延期/分期审批
      router.push({
        name: 'administrative-penalty-examine',
        query: { progressId: item.processId, id: item.bizId },
      });
    }

    if (item.messageType == 6) {
      // 案件终止审批
      router.push({
        name: 'administrative-penalty-examine',
        query: { progressId: item.processId, id: item.bizId },
      });
    }
    if (item.messageType == 11) {
      // 系统消息
      router.push({
        path: '/administrative-penalty/examineView',
        query: { id: item.bizId },
      });
    }
  };
  defineOptions({
    name: 'DashboardWelcome',
  });
  onMounted(() => {
    initData();
  });
</script>

<style lang="less" scoped>
  @import '@/styles/theme.less';

  .box {
    width: 100%;
    height: calc(100vh - 280px);
    padding: 20px;

    .topBox {
      border-radius: 4px;
      border: 1px solid #f0f0f0;
      padding: 16px;

      .titleBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .title {
          font-size: 16px;
          font-weight: 700;
          color: #444444;
        }

        .text {
          /** 文本1 */
          font-size: 12px;
          font-weight: 400;
          color: #999999;
          display: flex;
          align-items: center;

          img {
            margin-right: 6px;
          }
        }
      }

      .mainBox {
        padding: 24px 0 24px 12px;
        display: flex;
        cursor: pointer;

        .mainText {
          margin-left: 12px;
          display: flex;
          flex-direction: column;

          .num {
            font-size: 25px;
            font-weight: 700;
            margin-bottom: 4px;
          }

          .smallText {
            font-size: 12px;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
          }
        }
      }
    }

    .topRightBox {
      min-height: 268px;
      padding: 16px 10px;

      .titleBox {
        margin-bottom: 20px;

        .title {
          margin: 0 6px;
        }
      }
    }
  }
</style>
